<template>
  <div id="monthBY"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "monthBY",
  props: {},
  data() {
    return {
      chartDom: null,
      myChart: null,
      option: null,
    };
  },
  methods: {
    async getData() {
      this.option = {
        // grid: {
        //   top: 30,
        //   left: 30, // 将left属性值调整为30
        //   bottom: 30,
        //   containLabel: false,
        // },
        xAxis: {
          type: "category",
          name: "月份",
          nameTextStyle: {
            color: "#fff",
          },
          axisLabel: { show: true, color: "#fff", rotate: 0 }, //显示轴的数值
          boundaryGap: false,
          data: ["1", "2", "3", "4", "5","6", "7", "8", "9", "10","11","12"],
        },
        yAxis: {
          type: "value",
          name: "产量",
          nameTextStyle: {
            color: "#fff",
            padding: [0, 0, 0, -25],
          },
          splitLine: { show: false }, //显示背景线轴
          axisLine: { show: false }, //显示轴
          axisLabel: { show: true, color: "#fff" }, //显示轴的数值
          axisTick: { show: false }, //轴刻度线
        },
        series: [
          {
            smooth: true,
            data: [150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147],
            type: "line",
          },
        ],
      };
    },
    async initChart() {
      this.chartDom = document.getElementById("monthBY");
      this.myChart = echarts.init(this.chartDom);
      this.myChart.setOption(this.option);
    },
  },
  async mounted() {
    // console.log(this.stationId,'this.stationId')
    const that = this;
    await this.getData();
    await this.initChart();
    window.addEventListener("resize", function () {
      that.myChart.resize();
    });
  },
};
</script>

<style scoped>
#monthBY {
  width: 100%;
  height: 100%;
}
</style>
